<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1905电影网 大作业</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <!--           Web课程大作业                                                      -->
    <!--      该Html分为以下几个部分：                                                 -->
    <!-- L24      1.导航栏，含有搜索框，为[Navigate]                                   -->
    <!-- L90      2.图片滚动部分，为[Slide]                                           -->
    <!-- L98      3.滚动部分的选择框[Choice]，该功能水平有限未能实现，但保留了基本样式    -->
    <!-- L119     4.正文部分，为[text1][text2][text3][text4] （L220 L289 L365）        -->
    <!-- L441     5.关于我们部分[AboutUs]                                             -->
    <!-- L476     6.版权声明[Copyright]                                               -->
    <!--                                                                             -->
    <!--      不同模块均有注释标注                                                     -->



    <!---------------------------------------------[NAVIGATE]------------------------------------------>

    <div class="nav-back">

        <div class="nav">
            <a href="#"><img src="images/icon-cctv.png"></a>
            <ul>
                <li><a href="#">首页</a></li>
                <li>
                    <a href="#">新闻·评论</a>
                </li>
                <li>
                    <a href="#">电影号</a>
                </li>
                <li>
                    <a href="#">独家栏目</a>
                    <ul>
                        <li><a href="#">M视频</a></li>
                        <li><a href="#">中国电影频道</a></li>
                        <li><a href="#">今日影评</a></li>
                        <li><a href="#">电影全解码</a></li>
                        <li><a href="#">佳片有约</a></li>
                        <li><a href="#">世界电影之旅</a></li>
                        <li><a href="#">光影星播客</a></li>
                        <li><a href="#">周游电影</a></li>
                        <li><a href="#">鹦鹉画外音</a></li>
                        <li><a href="#">秒懂电影</a></li>
                        <li><a href="#">新片约吗</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">大片</a>
                </li>
                <li>
                    <a href="#">VIP影院</a>
                </li>
                <li>
                    <a href="#">资料馆</a>
                </li>

                <form class="nav-search">
                    <input type="text" class="search" placeholder="Type here.">
                    <input type="submit" value="" class="icon">
                </form>

                <form class="nav-client">
                    <a href="#"><img src="images/icon-client.png"></a>
                    <br/>
                    <p>login</p>
                </form>

                <form class="nav-client">
                    <a href="#"><img src="images/icon-clock.png"></a>
                    <br/>
                    <p>history</p>
                </form>

                <form class="nav-client">
                    <a href="#"><img src="images/icon-mobile.png"></a>
                    <br/>
                    <p>APP</p>
                </form>


            </ul>
        </div>

    </div>

    <!--------------------------------------------- [SLIDE] ------------------------------------------------>
    <div class="slide">
        <ul class="slide-auto">
            <li> </li>
            <li> </li>
            <li> </li>
        </ul>
    </div>
    <!--------------------------------------------- [SlideChoice](simulate) ------------------------------------------------>
    <div class="choice">
        <ul>
            <li><a href="#">光阴里的抗战</a><br/>
                <a href="#">电影频道独家策划</a></li>
            <li><a href="#">第15届中国长春电影节</a><br/>
                <a href="#">9月5日-9月10日</a></li>
            <li><a href="#">张译不断“加戏”</a><br/>
                <a href="#">怎么这么拼？</a></li>
            <li><a href="#">2020最强国庆档</a><br/>
                <a href="#">重磅大片强势“补位”</a></li>
            <li><a href="#">“中国版”扎堆来袭</a><br/>
                <a href="#">下一个《误杀》在哪里</a></li>
            <li><a href="#">风雨无阻·奋勇前进</a><br/>
                <a href="#">主题影片展播</a></li>
            <li><a href="#">古田军号</a><br/>
                <a href="#">军号声声共忆峥嵘</a></li>

        </ul>
    </div>

    <!--------------------------------------------- [TEXT PART1] ------------------------------------------------>

    <div class="background1">
        <div class="text1">

            <!--LEFT PART-->
            <div class="text1-left">
                <p class="Abstract">要闻</p>
                <div style="width:100%;height:1px;border-top:solid #ACACAC 2px;"></div>
                <div style="width:60px;height:1px;border-top:solid #000000 4px;position: relative;top: -4px"></div>
                <p class="sub-title">习近平领导中国战“疫”</p>
                <img src="images/icon-quote.png">
                <span class="top-text">
                    在武汉火神山医院，习近平戴着口罩，通过视频连线，问候病床上的患者。“现在你们最应该做的就是要坚定信心，我们大家共同来坚定信心，一定会打赢这一场战‘疫’。”“武汉必胜，湖北必胜，全中国也必胜！”2020年3月10日这一幕，通过电视和网络传遍世界，成为最受瞩目的新闻。
                    
                    </span><br/><br/>

                <span class="below-text"><a href="#">焦点 &nbsp;|&nbsp; 国家网信办深入推进“三项整治”行动取得阶段性成效</a></span><br/>
                <div style="width:100%;height:1px;border-bottom:solid #ACACAC 1px;padding:2px 0 0 4px;"></div>
                <span class="below-text"><a href="#">热点 &nbsp;|&nbsp; 弘扬雷锋精神 打造新时代道德建设高地</a></span><br/>
                <div style="width:100%;height:1px;border-bottom:solid #ACACAC 1px;padding:2px 0 0 4px;"></div>
                <span class="below-text"><a href="#">热点 &nbsp;|&nbsp; 用优质内容塑形铸魂</a></span><br/>
                <div style="width:100%;height:1px;border-bottom:solid #ACACAC 1px;padding:2px 0 0 4px;"></div>
                <span class="below-text"><a href="#">热点 &nbsp;|&nbsp; 文化界人士：中国文化产业应聚焦更高质量发展</a></span><br/>
                <div style="width:100%;height:1px;border-bottom:solid #ACACAC 1px;padding:2px 0 0 4px;"></div>
                <span class="below-text"><a href="#">热点 &nbsp;|&nbsp; 新技术助力美的创造</a></span><br/>
                <div style="width:100%;height:1px;border-bottom:solid #ACACAC 1px;padding:2px 0 0 4px;"></div>


            </div>


            <!--MIDDLE PART-->
            <div class="text1-middle">
                <div class="text1-middle">
                    <p class="Abstract">快讯</p>
                    <div style="width:100%;height:1px;border-top:solid #ACACAC 2px;"></div>
                    <div style="width:60px;height:1px;border-top:solid #000000 4px;position: relative;top: -4px"></div>

                    <span class="sub-title"><a href="#"> 独家探访长影旧址 揭秘新中国电影“七个第一”</a></span><br/>
                    <span class="sub-text"><a href="#">· 周票房：管虎导演新片再夺冠 2020年累计票房达65亿</a></span><br/>
                    <span class="sub-text"><a href="#">· “光明影院”项目落地吉林 全年为视障群体公益放映</a></span><br/>
                    <span class="sub-text"><a href="#">· 电影《月半爱丽丝》曝预告定档10.30 关晓彤为戏增胖</a></span><br/>
                    <br/>

                    <span class="sub-title"><a href="#">《第一炉香》曝预告 马思纯彭于晏演绎爱恨纠葛</a></span><br/>
                    <span class="sub-text"><a href="#">· 泣别！陈木胜辞灵礼举行 成龙洪金宝郭富城等现身致哀</a></span><br/>
                    <span class="sub-text"><a href="#">· 北野武《菊次郎的夏天》定档9.25 黄海操刀中国版海报</a></span><br/>
                    <span class="sub-text"><a href="#">·《我的女友是机器人》曝终极预告 辛芷蕾引包贝尔崩溃</a></span><br/>
                    <br/>

                    <span class="sub-title"><a href="#">《在劫难逃》到《信条》 时间被玩出了什么花样</a></span><br/>
                    <span class="sub-text"><a href="#">· 电影《新愚公移山》举办百余场公益点映 点亮乡村天空</a></span><br/>
                    <span class="sub-text"><a href="#">· 每日票房 | 《我的女友是机器人》上榜 《信条》超2亿</a></span><br/>
                    <span class="sub-text"><a href="#">· 抗战题材电影《芙蓉渡》曝幕后花絮 还原真实拍摄现场</a></span><br/>

                </div>

            </div>



            <!--RIGHT PART-->
            <div class="text1-right">
                <div class="text1-right">
                    <p class="Abstract">深度</p>
                    <div style="width:100%;height:1px;border-top:solid #ACACAC 2px;"></div>
                    <div style="width:60px;height:1px;border-top:solid #000000 4px;position: relative;top: -4px"></div>

                    <div class="text1-middle-part1">
                        <a href="#"><img src="images/text1-1.png"></a>
                        <a href="#">上半年网络电影研究报告</a>
                        <p>电影频道融媒体中心、1905电影网M大数据联合发布《2020上半年网络电影研究报告》。</p>
                        <br/>
                    </div>
                    <div style="width:100%;height:1px;border-top:solid #dbdbdb 2px;"></div>
                    <div class="text1-middle-part1">
                        <a href="#"><img src="images/text1-2.png"></a>
                        <a href="#">悬疑剧被“她们”玩出新花样</a>
                        <p>国产悬疑网剧《摩天大楼》引发热议，“她悬疑”崛起戳中了谁的“泪点”和“痛点”？</p>
                        <br/>
                    </div>
                    <div style="width:100%;height:1px;border-top:solid #e4e4e4 2px;"></div>

                    <div class="text1-middle-part2">
                        <a href="#"><img src="images/text1-3.png"></a>
                    </div>

                </div>
            </div>

            <div class="clear"></div>

            <div class="text1-bottom">
                <center><a href="#" class="text1-linkBottom">更多新闻</a></center>
            </div>

        </div>

    </div>

    <!--------------------------------------------- [TEXT PART2] ------------------------------------------------>

    <div class="background2">

        <div class="text2">

            <!--TITLE-->
            <h1>电影评论</h1>

            <!--LEFT PART-->
            <div class="text2-left">
                <a href="#"><img src="images/text2-1.png"></a>
                <span>
                    <a href="#" class="link">今日影评</a>
                    <p>CCTV6周一至周五每日播出</p>
                    <div class="clear"></div>
                    <a href="#" class="text2-left-title">
                        一周热点：你会去影院看《花木兰》吗？
                    </a>
                    <img src="images/icon-quote.png"><temp>历尽等待，中国影迷终于等来电影《花木兰》内地定档的消息。尽管定档海报的“土味”及晚于海外流媒体上线……</temp>
                </span>
            </div>

            <!--MIDDLE PART-->
            <div class="text2-middle">
                <div class="text2-middle-part1">
                    <a href="#"><img src="images/text2-2-1.png"></a>
                    <a href="#">尹鸿眼中的《八佰》：我们都是苏州河南岸的看客</a>
                    <p>不经过点波折，可能就不值得等待。首映当天，在IMAX大银幕……</p>
                    <span>作者：中国电影报道</span>
                </div>

                <div class="text2-middle-part1" style="margin:20px 0;">
                    <a href="#"><img src="images/text2-2-2.png"></a>
                    <a href="#">贾樟柯联手开心麻花 混搭出口碑佳作《又见奈良》</a>
                    <p>今年上海国际电影节的华语片可以用“爆款频出”来形容…… </p>
                    <span>作者：无念</span>
                </div>

                <div class="text2-middle-part1">
                    <a href="#"><img src="images/text2-2-3.png"></a>
                    <a href="#">黄渤监制章宇主演，《风平浪静》后劲儿太猛了！</a>
                    <p>《风平浪静》的故事像一杯烈酒，压抑感几乎从头到尾，极度…… </p>
                    <span>作者：方枪枪</span>
                </div>
            </div>

            <!--RIGHT PART-->
            <div class="text2-right">
                <a href="#"><img src="images/text2-3.png"></a>
                <span>
                    <a href="#" class="text2-right-title">
                        综艺衍生电影能行吗？
                    </a>
                    <img src="images/icon-quote.png"><temp>大热综艺《乐队的夏天》将翻拍电影，“综艺改编电影”进场，成败几何？ </temp>
                </span>
            </div>


            <div class="clear"></div>

            <div class="Bottom">
                <center><a href="#" class="linkBottom">查看更多</a></center>
            </div>

        </div>

    </div>

    <!--------------------------------------------- [TEXT PART3] ------------------------------------------------>

    <div class="background3">
        <div class="text3">

            <h1>新片动态</h1>

            <div class="text3-left">
                <div class="text3-left-part1">
                    <a href="#"><img src="images/text3-1.png"></a>
                    <a href="#">
                        <p>《第一炉香》发布首支预告</p>
                    </a>
                </div>

                <div class="text3-left-part1">
                    <a href="#"><img src="images/text3-2.png"></a>
                    <a href="#">
                        <p>《信条》曝光“最强战力”版预告</p>
                    </a>
                </div>

            </div>

            <div class="text3-left">
                <div class="text3-left-part1">
                    <a href="#"><img src="images/text3-3.png"></a>
                    <a href="#">
                        <p>《我的女友是机器人》终极预告</p>
                    </a>
                </div>

                <div class="text3-left-part1">
                    <a href="#"><img src="images/text3-4.png"></a>
                    <a href="#">
                        <p>北野武导演名作《菊次郎的夏天》发布定档预告</p>
                    </a>
                </div>

            </div>

            <div class="text3-left">
                <div class="text3-left-part1">
                    <a href="#"><img src="images/text3-5.png"></a>
                    <a href="#">
                        <p>《芙蓉渡》首曝花絮</p>
                    </a>
                </div>

                <div class="text3-left-part1">
                    <a href="#"><img src="images/text3-6.png"></a>
                    <a href="#">
                        <p>《碟中谍7》片场特辑</p>
                    </a>
                </div>

            </div>

            <div class="text3-right">

                <br/>
                <span class="sub-title"><a href="#">《第一炉香》首曝预告 马思纯彭于晏演绎爱恨纠葛</a></span><br/>
                <span class="sub-text"><a href="#">·关晓彤长胖了！《月半爱丽丝》曝预告定档10.30</a></span><br/>
                <span class="sub-text"><a href="#">·抗战电影《芙蓉渡》首曝花絮 还原真实拍摄现场</a></span><br/>
                <span class="sub-text"><a href="#">·《新愚公移山》公益点映再起航 场场满座好评如潮</a></span><br/>
                <span class="sub-text"><a href="#">·瞩目！《青春之骏》斩获北京民族电影展四项大奖</a></span><br/>
                <br/>
                <div style="width:100%;height:1px;border-top:solid #ACACAC 2px;"></div>
                <br/>
                <span class="sub-title"><a href="#">北野武《菊次郎的夏天》9.25上映 定格温情夏日</a></span><br/>
                <span class="sub-text"><a href="#">·《信条》首周末突破2亿 好评如潮引全民解析狂欢</a></span><br/>
                <span class="sub-text"><a href="#">·雨果·维文遗憾缺席《黑客帝国4》 角色去留成迷</a></span><br/>
                <span class="sub-text"><a href="#">·《碟中谍7》导演晒大场面片场照 峡谷中间建跑道</a></span><br/>
                <span class="sub-text"><a href="#">·木村拓哉《假面饭店》热映 “酒店剧本杀”获好评</a></span><br/>
                <br/>
            </div>



            <div class="clear"></div>

            <div class="text3-bottom">
                <center><a href="#" class="text3-linkBottom">查看更多</a></center>
            </div>

        </div>

    </div>
    <!-------------------------------------------- [TEXT PART4] ------------------------------------------------>
    <div class="background4">
        <div class="text4">

            <h1>热播大片</h1>

            <div class="text4-left">
                <a href="#"><img src="images/text4-1.png"></a>
                <p class="title4"><a href="#">半个喜剧</a></p>
                <p class="t-text4"><a href="#">开心麻花生活喜剧</a></p>
            </div>

            <div class="text4-left">
                <a href="#"><img src="images/text4-2.png"></a>
                <p class="title4"><a href="#">古田军号</a></p>
                <p class="t-text4"><a href="#">再现革命非凡历程</a></p>
            </div>

            <div class="text4-left">
                <a href="#"><img src="images/text4-3.png"></a>
                <p class="title4"><a href="#">利刃破冰</a></p>
                <p class="t-text4"><a href="#">燕双鹰破贩毒大案</a></p>
            </div>

            <div class="text4-left">
                <a href="#"><img src="images/text4-4.png"></a>
                <p class="title4"><a href="#">我为你牺牲</a></p>
                <p class="t-text4"><a href="#">武警部队真实故事</a></p>
            </div>

            <div class="text4-left">
                <a href="#"><img src="images/text4-5.png"></a>
                <p class="title4"><a href="#">攀登者</a></p>
                <p class="t-text4"><a href="#">吴京挑战世界之巅</a></p>
            </div>

            <div class="text4-left">
                <a href="#"><img src="images/text4-6.png"></a>
                <p class="title4"><a href="#">云南虫谷</a></p>
                <p class="t-text4"><a href="#">摸金校尉探献王墓</a></p>
            </div>

            <div class="text4-last">
                <a href="#"><img src="images/text4-7.png"></a>
                <p class="title4"><a href="#">找到你</a></p>
                <p class="t-text4"><a href="#">姚晨踏上寻子旅程</a></p>
            </div>

        </div>


        <div class="clear"></div>

        <div class="text4-bottom">
            <center><a href="#" class="text4-linkBottom">&nbsp;&nbsp;&nbsp;更多VIP电影&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;
                <a href="#" class="text4-linkBottom">&nbsp;&nbsp;&nbsp;更多免费电影&nbsp;&nbsp;&nbsp;</a>
            </center>
        </div>

        <div class="friendly-links">
            <a href="#" class="fl-head">友情链接</a><br/><br/>
            <a href="#" class="fl-list">人民网</a>&emsp;&emsp;&emsp;&emsp;
            <a href="#" class="fl-list">新华网</a>&emsp;&emsp;&emsp;&emsp;
            <a href="#" class="fl-list">中国网</a>&emsp;&emsp;&emsp;&emsp;
            <a href="#" class="fl-list">央广网</a>&emsp;&emsp;&emsp;&emsp;
            <a href="#" class="fl-list">法制网</a>&emsp;&emsp;&emsp;&emsp;
            <a href="#" class="fl-list">科技部</a>&emsp;&emsp;&emsp;&emsp;
            <a href="#" class="fl-list">光明网</a>&emsp;&emsp;&emsp;&emsp;
            <a href="#" class="fl-list">搜狐新闻</a>&emsp;&emsp;&emsp;&emsp;
            <a href="#" class="fl-list">网易新闻</a>&emsp;&emsp;&emsp;&emsp;
            <a href="#" class="fl-list">西影网</a>&emsp;&emsp;&emsp;&emsp;

        </div>


    </div>
    <!--------------------------------------------- [ABOUT US] ------------------------------------------------>
    <div class="background5">
        <div class="about-us">
            <img src="images/icon-cctv.png"><br/>

            <a href="#" class="au-list">关于我们</a>&emsp;&emsp;
            <span>|</span>&emsp;&emsp;
            <a href="#" class="au-list">网站地图</a>&emsp;&emsp;
            <span>|</span>&emsp;&emsp;
            <a href="#" class="au-list">诚聘英才</a>&emsp;&emsp;
            <span>|</span>&emsp;&emsp;
            <a href="#" class="au-list">版权声明</a>&emsp;&emsp;
            <span>|</span>&emsp;&emsp;
            <a href="#" class="au-list">联系我们</a>&emsp;&emsp;
            <span>|</span>&emsp;&emsp;
            <a href="#" class="au-list">帮助与反馈</a>&emsp;&emsp;
            <span>|</span>&emsp;&emsp;
            <a href="#" class="au-list">友情链接</a>&emsp;&emsp;
            <span>|</span>;&emsp;&emsp;
            <a href="#" class="au-list">CCTV6广告招商</a>&emsp;&emsp;
            <span>|</span>&emsp;&emsp;<br/><br/>

            <a href="#" class="allowance">网络视听许可证0107199号</a>&emsp;&emsp;&emsp;
            <a href="#" class="allowance"> 出版物经营许可证</a>&emsp;&emsp;&emsp;
            <a href="#" class="allowance"> 电影发行经营许可证</a>&emsp;&emsp;&emsp;
            <a href="#" class="allowance"> 经营性演出许可证</a>&emsp;&emsp;&emsp;
            <a href="#" class="allowance"> 广播电视节目制作经营许可证</a>&emsp;&emsp;&emsp;<br/>
            <a href="#" class="allowance">企业法人营业执照</a>&emsp;&emsp;&emsp;
            <a href="#" class="allowance"> 增值电信业务经营许可证</a>&emsp;&emsp;&emsp;
            <a href="#" class="allowance"> 京ICP备12022675号-3</a>&emsp;&emsp;&emsp;
            <a href="#" class="allowance"> 京公网安备 11010202000300号</a>&emsp;&emsp;&emsp;

        </div>
    </div>

    <!--------------------------------------------- [COPYRIGHT] ------------------------------------------------>
    <div class="background6">
        <div class="copyright">
            <span class="cp">copyright©2017</span>&emsp;
            <span class="cp2"> 电影频道节目中心官方网站&emsp;|&emsp;</span>
            <a href="#">京ICP证100935</a>
        </div>
    </div>


</body>

</html>